<template>
	<view class="main">
		<view class="mian-turn">
			<LuckyWheel ref="myLucky" width="690rpx" height="690rpx" :blocks="blocks" :prizes="prizes"
				:buttons="buttons" :defaultStyle="defaultStyle" :defaultConfig="defaultConfig" @start="startCallBack"
				@end="endCallBack" />
		</view>
	</view>
</template>

<script>
	import LuckyWheel from '@lucky-canvas/uni/lucky-wheel'
	export default {
		components: {
			LuckyWheel
		},
		data() {
			return {
				title: "",
				blocks: [{
					padding: '10rpx',
					background: '#fff'
				}],
				prizes: [
					// { fonts: [{ text: '0', top: '10%' }], background: '#da7c7a' },
					// { fonts: [{ text: '11', top: '10%' }], background: '#f2e283' },
					// { fonts: [{ text: '222', top: '10%' }], background: '#afe6be' },
					// { fonts: [{ text: '3333', top: '10%' }], background: '#b8c5f2' },
					// { fonts: [{ text: '44444', top: '10%' }], background: '#e9e8fe' },
					// { fonts: [{ text: '555555', top: '10%' }], background: '#b8c5f2' },
					// { fonts: [{ text: '6666666', top: '10%' }], background: '#b8c5f2' },
					// { fonts: [{ text: '777777777777777', top: '10%' }], background: '#b8c5f2' },
				],
				defaultConfig: {
					gutter: '3px',
					accelerationTime: 1000,
					decelerationTime: 1000,
					speed: 20
				},
				buttons: [{
						radius: '20%',
						background: '#617df2'
					},
					{
						radius: '17%',
						background: '#afc8ff'
					},
					{
						radius: '15%',
						background: '#869cfa',
						pointer: true,
						fonts: [{
							text: 'Go',
							top: '-10px'
						}]
					}
				],
			}
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.tableinfo));
			this.title = item.turnTitle
			console.log('上一个页面传递过来的参数对象', item)
			uni.setNavigationBarTitle({
				title: item.turnTitle
			})
			this.prizes = item.turnInfo.reduce((s, i) => {
				s.push({
					fonts: [{
						text: i.turnName,
						fontColor:"#fff",
						top: '10%'
					}],
					background: i.bgc,
					range: i.range
				})
				return s
			}, [])
		},
		methods: {
			// 点击抽奖按钮触发回调
			startCallBack() {
				this.$shake()
				// 先开始旋转
				this.$refs.myLucky.play()
				// 使用定时器来模拟请求接口
				setTimeout(() => {
					// 假设后端返回的中奖索引是0
					// const index = 1
					// 调用stop停止旋转并传递中奖索引
					this.$refs.myLucky.stop()
				}, 3000)
			},
			// 抽奖结束触发回调
			endCallBack(prize) {
				this.$shake()
				// 奖品详情
				console.log(prize)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		.mian-turn {
			width: 690rpx;
			height: 693rpx;
			margin: 100rpx auto;
			background-color: #fff;
			border: 3px solid #ccc;
			border-radius: 51%;
			box-shadow: 0 0 5px 2px #ccc;
		}
	}
</style>